<template>
  <div id="vue4">
    <h2>chart</h2>
    <ul>
      <template v-for="(item, index) in goods">
        <li :key="index">
          <span>{{ index }}</span>
          <span>{{ item.name }}</span>
          <span>￥{{ item.price }}</span>
          <span>{{ item.count }}</span>
          <span>{{ item.desc }}</span>
          <v-btn
            small
            @click="add(index)"
          >
            add
          </v-btn>
          <v-btn
            small
            @click="decre(index)"
            :disabled="item.count==0"
          >
            decrease
          </v-btn>
          <v-btn
            small
            @click="del(index)"
          >
            delete
          </v-btn>
        </li>
      </template>
    </ul>
    <h3>total: {{ total() }}</h3>
    <h3>total: {{ totalp }}</h3>
  </div>
</template>

<script>
export default {
  data: () => ({
    index: 0,
    goods: [
      {
        name: 'apple',
        price: '5.5',
        count: 6,
        desc: 'desc',
      },
      {
        name: 'orange',
        price: '7',
        count: 3,
        desc: 'desc',
      },
      {
        name: 'juice',
        price: '15',
        count: 1,
        desc: 'desc',
      },
      {
        name: 'wahaha',
        price: '3.5',
        count: 10,
        desc: 'desc',
      },
    ],
  }),
  methods: {
    add(i) {
      this.goods[i].count++;
    },
    decre(i) {
      this.goods[i].count--;
    },
    del(i) {
      this.goods.splice(i, 1);
    },
    total() {
      let sum = 0;
      for (let index = 0; index < this.goods.length; index++) {
        const element = this.goods[index];
        // console.log('element :', this.goods.length);
        sum += element.price * element.count;
      }
      return sum;
    },
  },
  computed: {
    totalp() {
      let sum = 0;
      for (let index = 0; index < this.goods.length; index++) {
        const element = this.goods[index];
        sum += element.price * element.count;
      }
      return sum;
    },
  },
};
</script>

<style>
#vue4 {
  min-width: 1000px;
}

ul {
  list-style: none;
}

#vue4 li {
  min-width: 800px;
  padding: 10px;
  margin: 10px;
  border: 1px solid #666;
  /* height: 40px; */
}

#vue4 li span {
  background-color: #888;
  color: #fff;
  padding: 5px;
  margin: 5px;
  width: 80px;
  display: inline-block;
  text-align: center;
}
</style>
